﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>
body {
	margin-top: 20px;
	margin: 0 auto;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}

font {
	color: #3164af;
	font-size: 18px;
	font-weight: normal;
	padding: 0 10px;
}
</style>
</head>

<body>

	<!-- 引入header.jsp -->
	<div class="container-fluid">
		<div class="col-md-4" style="float: left">
			<a href="/"><img src="img/logo.jpg" /></a>
		</div>
	</div>

	<div class="container"
		style="width: 100%; background: url('image/regist_bg.jpg') no-repeat;">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8"
				style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
				<font>会员注册</font>USER REGISTER
				<form onsubmit="return check()" class="form-horizontal"
					style="margin-top: 5px;"
					action="${pageContext.request.contextPath}/register.do"
					method="POST">
					<font style="color: red; margin-left: 50px"> <!-- 提示信息 --> <span
						style="font-size: 20px" id="message">${msg}</span>
					</font>
					<div class="form-group">
						<label for="username" class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="username"
								placeholder="请输入用户名" name="username">
						</div>
						<strong style="color: red">*</strong>
					</div>
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="password"
								placeholder="请输入密码" name="password" value=""
								onKeyUp="value=value.replace(/[\W]/g,'')">
						</div>
						<strong style="color: red">*</strong>
					</div>
					<div class="form-group">
						<label for="confirmpwd" class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-6">
							<input type="password" class="form-control" id="confirmpwd"
								placeholder="请输入确认密码" onKeyUp="value=value.replace(/[\W]/g,'')">
						</div>
						<strong style="color: red">*</strong>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-6">
							<input type="email" class="form-control" id="email"
								placeholder="Email" name="email">
						</div>
						<strong style="color: red">*</strong>
					</div>
					<div class="form-group">
						<label for="inputEmail3" class="col-sm-2 control-label">手机号</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="telephone"
								placeholder="请输入手机号" name="telephone"
								onkeyup="this.value=this.value.replace(/\D/g,'')">
						</div>
						<strong style="color: red">*</strong>
					</div>
					<div class="form-group">
						<label for="usercaption" class="col-sm-2 control-label">姓名</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="name"
								placeholder="请输入姓名" name="name"
								onkeyup="value=value.replace(/[\d]/g,'')">
						</div>
						<strong style="color: red">*</strong>
					</div>
					<div class="form-group opt">
						<label for="inlineRadio1" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-6">
							<label class="radio-inline"> <input type="radio"
								name="sex" id="sex" value="男" checked="checked"> 男
							</label> <label class="radio-inline"> <input type="radio"
								name="sex" id="sex" value="女"> 女
							</label>
						</div>
					</div>
					<div class="form-group">
						<label for="date" class="col-sm-2 control-label">出生日期</label>
						<div class="col-sm-6">
							<input type="date" class="form-control" id="birthday"
								name="birthday" value="2018-04-7">
						</div>
					</div>


					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<input class="btn btn-warning" type="submit" width="100"
								value="注册" name="submit" style="width: 100px; font-size: 16px;">
						</div>
					</div>
				</form>
			</div>

			<div class="col-md-2"></div>

		</div>
	</div>

	<!-- 引入footer.jsp -->
	<jsp:include page="/footer.jsp" />

	<script type="text/javascript">
		//判断用户必填信息是否为空
		function check(){
			var username = $("#username").val();
			var password = $("#password").val();
			var confirmpwd = $("#confirmpwd").val();
			var telephone = $("#telephone").val();
			var email = $("#email").val();
			
			if(username == ""){
				return alert("账号不能为空！");
			}else if(username.length>11){
				return alert("账号位数小于11位！");
			}else if(password.length != 6){
				return alert("密码必须为6位字母或数字！");
			}else if(confirmpwd != password){
				return alert("密码不一致！");
			}else if(email == ""){
				return alert("邮箱不能为空！");
			}else if(telephone.length != 11){
				return alert("手机号码必须为11位的数字！");
			}else if(window.confirm("确定要注册吗？")){
				return true;
			}else{
				return false;
			}
		}
	</script>

</body>

</html>